<template>
	<div class="index1">
		<header>
			<span>有品</span>
			<router-link to="/search">
				<dl>
					<dd class="iconfont icon-xingtaiduICON_sousuo--">
						
					</dd>
					<input type="text" value="搜一搜">
					<dt class="iconfont icon-scan">
						
					</dt>
				</dl>
			</router-link>
			
			<span class="iconfont icon-lingdang">
				
			</span>
		</header>
		<footer>
			<!--轮播-->
			<div class="banner">
				 <!-- Swiper -->
				  <div class="swiper-container">
				    <div class="swiper-wrapper">
				      <div class="swiper-slide">
						  <img src="../assets/img/1.jpg" alt="">
					  </div>
				      <div class="swiper-slide">
						  <img src="../assets/img/2.jpg" alt="">
					  </div>
				      <div class="swiper-slide">
						  <img src="../assets/img/3.jpg" alt="">
					  </div>
				      <div class="swiper-slide">
						  <img src="../assets/img/4.jpg" alt="">
					  </div>
				      <div class="swiper-slide">
						  <img src="../assets/img/5.jpg" alt="">
					  </div>
				     
				    </div>			
				    <!-- Add Pagination -->
				    <div class="swiper-pagination"></div>			
				    <!-- Add Arrows -->
				    <!-- <div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div> -->
				  </div>
			</div>
			<!--商品详情-->
			<div class="content">
				<dl>
					<dd>
						<img src="../assets/img/1.png" alt="">
					</dd>
					<dt>
						每日上新
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/2.png" alt="">
					</dd>
					<dt>
						限时抢购
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/3.png" alt="">
					</dd>
					<dt>
						换季必备
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/4.png" alt="">
					</dd>
					<dt>
						家用电器
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/5.png" alt="">
					</dd>
					<dt>
						助力免单
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/6.png" alt="">
					</dd>
					<dt>
						每日上新
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/5.png" alt="">
					</dd>
					<dt>
						助力免单
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/5.png" alt="">
					</dd>
					<dt>
						助力免单
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/5.png" alt="">
					</dd>
					<dt>
						助力免单
					</dt>
				</dl>
				<dl>
					<dd>
						<img src="../assets/img/5.png" alt="">
					</dd>
					<dt>
						助力免单
					</dt>
				</dl>
			</div>
			<!--登录提示框-->
			<div class="login">
				<dl v-if="yincang">
					<dd>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-chaihongbao"></use>
						</svg>
					</dd>
					<dd>
						登录有品，立即登录
					</dd>
					<dt>
						立即登录
					</dt>
				</dl>
			</div>
			<div class="details">
				<img src="../assets/img/11.jpg" alt="">
				<img src="../assets/img/12.jpg" alt="">
				<img src="../assets/img/13.jpg" alt="">
				<img src="../assets/img/14.jpg" alt="">
			</div>
			<!--每日上新-->
			<div class="everyday">
				<dl>
					<dd>每日上新</dd>
					<dt>更多&nbsp;></dt>
				</dl>
				<div class="big">
					<ul>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
						<li>
							<img src="../assets/img/20.jpg" alt="">
						</li>
					</ul>
				</div>

			</div>
			<!--限时购-->
			<div class="time">
				<div class="time_top">
					<h4>限时购</h4>
					<span>9点场</span>
					<dl>
						<dt>
							{{shi}}
						</dt>:
						<dt>{{fen}}</dt>:
						<dt>{{miao}}</dt>
					</dl>
					<p>更多&nbsp;></p>
				</div>
				<div class="time_bottom">
					<footer>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/22.jpg" alt="">
							</dd>
							<dt>
								<span>￥26.3</span>
								<del>￥59.9</del>
							</dt>
						</dl>
					</footer>
				</div>
			</div>
			<!--吸顶导航-->
			<div class="cei">
				<ul>
					
					<li>推荐</li>
					<li>智能</li>
					<li>电器</li>
					<li>生活</li>
					<li>时尚</li>
					<li>特惠</li>
				</ul>
			</div>
			<!--商品区-->
			<div class="goods">
				<ul>
					<li v-for="item in arr">
						<img :src="$base + '/' + item.img" alt="">
						<p>
							<span>￥{{item.price}}</span>
							<del>原价{{item.type}}</del>
						</p>						
					</li>
				</ul>
			</div>
		</footer>
		
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import 'swiper/css/swiper.min.css';
	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
	export default {
		data:function(){
			return {
				
				arr:[],
				shi:'',
				fen:'',
				miao:''
			}
		},
		computed:{
		 	...mapState({
		 		yincang : (state,getters)=>{
		 			 
		 			 return state.rng.newUsername;
		 		 }
		 	 }),
		 	 
		},
		methods:{
			
		},
		async mounted(){
			var {data} = await this.$axios.get("http://49.233.80.46:53000/home");	
			this.arr = data;
			var swiper = new Swiper('.swiper-container', {
				autoplay: true,
				loop: true,
			      effect: 'flip',
			      grabCursor: true,
			      pagination: {
			        el: '.swiper-pagination',
			      },
			      navigation: {
			        nextEl: '.swiper-button-next',
			        prevEl: '.swiper-button-prev',
			      },
			    });
				
		}
	}
</script>

<style lang="scss">
	*{
		box-sizing: border-box
	}
	li{
		list-style: none;
	}
	 .swiper-container {
	      width: 100%;
	      height: 4.5rem;
	      padding: 0.4rem;
		  box-sizing: border-box;
		  margin-bottom: 0.8rem;
	    }
	    .swiper-slide {
	      background-position: center;
	      background-size: cover;
	      width: 100%;
	      height: 100%;
		  img{
			  width: 100%;
			  height: 4.5rem;
		  }
	    }
	.index1{
		height: 100%;
		display: flex;
		flex-direction: column;
		header{
			display: flex;
			height: 1.73rem;
			background: yellowgreen;
			justify-content: space-around;
			align-items: center;
			span:nth-child(1){
				font-size: 20px;
				color: white;
			}
			dl{
				width: 7.3rem;
				height: 1rem;
				background: white;
				display: flex;
				border-radius: 0.5rem;
				//height: 100%;
				justify-content: center;
				align-items: center;
				dd{
					font-size: 26px;
					width: 0.96rem;
					border-radius: 0.5rem 0 0 0.5rem;
					text-align: center;
				}
				input{
					border: 0;
					outline:none;
				}
				dt{
					font-size: 22px;
					text-align: center;
					width: 0.96rem;
				}
			}
			span:nth-child(3){
				font-size: 26px;
			}
		}
		footer::-webkit-scrollbar{
		    display : none;
		}
		footer{	
			flex: 1;
			overflow: auto;
			background: #f3f3f3;
			margin-bottom: 1.5rem;
			.content{
				height:4.58rem;
				background: white;
				display: flex;
				flex-wrap: wrap;
				align-content:flex-start;
				dl{
					width: 20%;
					height: 50%;
					dd{
						width: 100%;
						height: 1.6rem;
						position: relative;
						img{
							width: 1.5rem;
							height: 1.5rem;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
					}
					dt{
						width: 100%;
						height: 0.55rem;
						font-size: 14px;
						text-align: center;
						line-height: 0.55rem;
					}
				}
			}
			.login{
				dl{
					margin-left: 0.3rem;
					padding-right:0.6rem;
					box-sizing: border-box;
					width: 10.2rem;
					height: 1.2rem;
					border-radius: 0.75rem;
					background: rgba(39,60,128,0.5);
					position: fixed;
					bottom: 2rem;
					display: flex;
					align-items: center;
					z-index: 12;
					dd{
						width: 1.42rem;
						height: 100%;
						text-align: center;
						line-height: 1.42rem;
					}
					dd:nth-child(2){
						width: 4.54rem;
						height: 100%;
						font-size: 12px;
						line-height: 1.2rem;
						text-align: left;
						color: white;
					}
					dt{
						width: 2.2rem;
						height: 0.86rem;
						background: #ed452a;
						border-radius:0.43rem ;
						font-size: 12px;
						text-align: center;
						line-height: 0.86rem;
						color: white;
						margin-left: 2.4rem;
					}
				}
			}
			.details{
				height: 6.2rem;
				
				padding:0.3rem ;
				display: flex;
				flex-wrap: wrap;
				img{
					width: 4.96rem;
					height: 2.68rem;
					margin-right: 0.1rem;
				}
			}
			.everyday{
				height: 5.28rem;
				background: white;
				margin-bottom: 0.3rem;
				dl{
					height: 1.3rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 0 0.3rem;
					
					dd{
						font-weight: 900;
					}
					dt{
						font-size: 14px;
						color: #bcbcbc;
					}
				}
				.big::-webkit-scrollbar{
				    display : none;
				}
				.big{
					width: 100%;
					height: 3.7rem;
					
					overflow: auto;
					ul{
						width: 26.61rem;
						display: flex;
						li{
							width: 2.7rem;
							height: 3.6rem;
							margin-left: 0.22rem;
							img{
								width: 100%;
								height: 100%;
								
							}
						}
					}
				}
			}
			.time{
				height: 4.86rem;
				margin-bottom: 0.5rem;
				background: white;
				.time_top{
					height: 1.32rem;
					display: flex;
					
					box-sizing: border-box;
					padding: 0.35rem 0.2rem 0 0.2rem;
					align-items: center;
					h4{
						margin-right: 0.2rem;
					}
					span{
						font-size: 14px;
						margin-right: 0.3rem;
					}
					dl{
						width: 2.2rem;
						height: 0.5rem;
						display: flex;
						justify-content: space-around;
						align-content: center;
						line-height: 0.5rem;
						margin-right: 3.8rem;
						dt{
							width: 0.5rem;
							height: 0.46rem;
							background: #c69745;
						}
					}
					p{
						font-size: 14px;
						color:#a0a0a0;
					}
				}
				.time_bottom::-webkit-scrollbar{
				    display : none;
				}
				.time_bottom{
					width: 100%;
					height: 3.5rem;
					overflow-x: auto;
					background: white;
					
					footer{
						width: 26.1rem;
						//height: 3.5rem;
						display: flex;
						justify-content: space-around;
						align-content: center;
						padding: 0;
						margin: 0;
						dl{
							height: 3.5rem;
							background: white;
							dd{
								width: 2.7rem;
								height: 2.7rem;
								
								img{
									width: 100%;
									height: 100%;
								}
							}
							dt{
								font-size: 14px;
								span{
									color: red;
								}
								del{
									color: #9e9e9e;
								}
							}
						}
					}
				}
			}
			.cei{
				height: 1.3rem;
				background: yellowgreen;
				width: 100%;
				overflow: auto;
				position:sticky ;
				ul{
					width: 11.64rem;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					li{
						width: 1.94rem;
						height: 0.38rem;
						font-size: 14px;
						text-align: center;
						line-height: 0.38rem;
						border-right:1px solid #e9e9e9 ;
					}
				}
			}
			.goods{
				min-height:15.7rem ;
				ul{
					min-height:7.7rem ;
					display: flex;
					flex-wrap:wrap ;
					li{
						margin: 0.2rem;
						width: 7.5rem;
						width: 4.9rem;
						img{
							width: 100%;
							height: 6.34rem;
						}
						p{
							height: 0.8rem;
							width: 100%;
							background: white;
							margin-top: -0.2rem;
							font-size: 14px;
							display: flex;
							justify-content: space-around;
							span{
								color: red;
							}
						}
					}
				}
			}
		}
	}
	.icon {
	  width: 1.8em;
	  height: 1.8em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	  color: #0077AA;
	}
	
</style>
